AJAX pierwszy krok
Opublikowano: 2009-07-28 , wyświetlono: 10027
Wstęp
Ostatnio często spotykałem się z terminem AJAX, dlatego też postanowiłem przybliżyć sobie ten temat i przystąpiłem do napisania prostego przykładu, który by wykorzystywał tą technologię. W tym tekście przedstawiam to co mi się udało siągnąć pewnego niedzielnego wieczoru.
Utworzony przykład w działaniu
uruchomienie przykładu [Ajax Test]
Odpowiedź w formacie tekstowym
Odpowiedź w formie tabeli - przetworzony xml
Co się dzieje po wybraniu linka Ajax Test
Wybranie linka uruchamia funkcję JavaScript, która korzystając z obiektu XMLHttpRequest pobiera z serwera plik /china1/ajax.xml i wyświetla jego zawartość w dwóch formatach.
Poniżej zawartość pliku /china1/ajax.xml
Poniżej zawartość pliku /china1/ajax.xml
<?xml version="1.0" ?>
<root>
<item><name id="p1">produkt1</name><price>1.00</price></item>
<item><name>produkt2</name><price>2.00</price></item>
<item><name>produkt3</name><price>3.00</price></item>
<item><name>produkt4</name><price>4.00</price></item>
<item><name>produkt5</name><price>5.00</price></item>
</root>
Krótkie wyjaśnienia
Powyższy przykład działa w oparciu o cztery funkcje:
sendRequest()
Obsługuje zdarzenie wybrania link'a
createRequestObject()
Funkcja tworząca objekt XMLHttpRequest
handleResponse()
Przetwarzanie odpowiedzi
createTable(xmlDoc)
Funkcja, która tworzy tabelkę z XML'a i została wydzielona dla przejrzystości przykładu.
Poniżej pełny kod przykładu dla jasności lekko skomentowany. Przetwarzania xml'a nie wyjaśniam, to odzielny temat - sam się przez niego z lekkim trudem przebijałem.
sendRequest()
Obsługuje zdarzenie wybrania link'a
createRequestObject()
Funkcja tworząca objekt XMLHttpRequest
handleResponse()
Przetwarzanie odpowiedzi
createTable(xmlDoc)
Funkcja, która tworzy tabelkę z XML'a i została wydzielona dla przejrzystości przykładu.
Poniżej pełny kod przykładu dla jasności lekko skomentowany. Przetwarzania xml'a nie wyjaśniam, to odzielny temat - sam się przez niego z lekkim trudem przebijałem.
<script type="text/javascript">
//
// funkcja tworzaca obiekt XMLHttpRequest zaleznie od przegladarki
function createRequestObject()
{
var request;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer")
{
request = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
request = new XMLHttpRequest();
}
return (request);
}
var http = createRequestObject();
var responseXML;
// wyslanie zadania do serwera
function sendRequest()
{
http.onreadystatechange = handleResponse;
http.open("get", "/china1/ajax.xml", true);
http.send(null);
}
// funkcja obslugujaca odpowiedz
function handleResponse()
{
// jezeli odpowiedz kompletna
if (http.readyState == 4)
{
// tylko jezeli "OK"
if (http.status == 200)
{
// tutaj przetwarzanie otrzymanej odpowiedzi ...
// wstawienie odpowiedzi tekstowej
document.getElementById("answer").innerHTML = http.responseText;
// obsluga odpowiedzi xml
var xmlDoc = http.responseXML;
createTable(xmlDoc);
}
else
{
alert("Problem z odbiorem danych XML:\n" + http.statusText);
}
}
}
// tworzenie tabeli z obiektu xml
function createTable(xmlDoc)
{
var items = xmlDoc.getElementsByTagName("item");
var item;
var out = "";
out += "<table border=1>";
for (var i = 0; i < items.length; i++)
{
item = items[i];
nameItem = item.getElementsByTagName("name").item(0);
priceItem = item.getElementsByTagName("price").item(0);
out += "<tr><td>" + nameItem.childNodes[0].nodeValue;
out += "</td><td>" + priceItem.childNodes[0].nodeValue;
out += "</td></tr>";
}
out += "</table>";
document.getElementById("xmlanswer").innerHTML = out;
}
</script>
<a href="javascript:sendRequest()">[Ajax Test]</a>
<!-- bloki html'owe do wyswietlenia odpowiedzi -->
<div id="answer">
</div>
<div id="xmlanswer">
</div>
<!-- koniec -->